<template>
	<section>	
		<el-row>
			<el-col :span="12" :offset="3">
				<h1 style="font-size:18px;font-weight: normal;">课程平均学习进度：</h1>
				<div id="myChartbing" :style="{width: '100%', height: '350px'}"></div>						
			</el-col>			
		</el-row>
		<el-table :data="Lists" highlight-current-row v-loading="loading" style="width: 100%;">

			<el-table-column prop="user.realName" label="学生姓名" width="200">
			</el-table-column>
			<el-table-column prop="user.phone" label="手机号" width="200">
			</el-table-column>			
			<el-table-column prop="completionScore" label="学习进度"  width="400" sortable>
				<template scope="scope">
				    <div class="progress">
				      <span class="green"  v-bind:style="{width:scope.row.completion+'%'}"><span style="padding: 0;">{{scope.row.completion}}%</span></span>
				    </div>					
				</template>
			</el-table-column>	
			<el-table-column prop="user.lastTime" label="最后登录时间" width="200" sortable>		
			</el-table-column>		
			<el-table-column prop="birth" min-width="200" label="操作" fixed="right">
				<template scope="scope">
					<el-button size="small" type="warning" @click.native="lookDetail(scope.row)" >查看详情</el-button>
				</template>					
			</el-table-column>
		</el-table>
		<!--工具-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	</section>
</template>
<script>
	import { courseStudent,courseTeam,courseone,coursestudentmark} from '../../api/api';
	import echarts from 'echarts'
	export default {
		data() {
			return {
				addFormVisible: false,//打分界面是否显示
				loading: false,
				dateloading:false,
				Lists: [],
				UserId:[],
				total:"",
				Calendardate:"",
				pageSize:'10',
				page:'1',
				key:'',
				date:"",
				type:"0",
				isSelf:'1',
				teamList:[],
				teaminferScore:[],
				teamroadScore:[],
				quanzhonglist:[
	                {value:'', name:'个人成绩'},
	                {value:'', name:'小组成绩'},
	                {value:'', name:'课堂表现'},
	                {value:'', name:'课程进度'},
	              
	            ],
	            performanceWeight:0,
	            personWeight:0,
	            teamWeight:0,
	            completionWeight:0
			}
		},	
		methods: {	
			//页面跳转
		    skip(link,id,row){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:this.$route.query.id,
		        			userid:id,
		        		}
		        	}
		        )
		    },	
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},	
			performenceScorechange(value,index){
				var personScore=this.Lists[index].personScore;
				var teamScore=this.Lists[index].teamScore;
				var completionScore=this.Lists[index].completionScore;
				this.Lists[index].totalScore=Math.round(value * this.performanceWeight)+Math.round(personScore * this.personWeight)+Math.round(teamScore * this.teamWeight)+Math.round(completionScore * this.completionWeight);
				this.Lists[index].totalScore=this.Lists[index].totalScore
				return this.Lists;
			},
			//获取项目列表
			getList: function (type) {
				this.loading = true;
				var params={courseId:this.$route.query.id,pageNum:this.page,pageSize:5}
				//NProgress.start();
				courseStudent(params).then((res) => {
					$.each(res.list, function(e,value) {
						value.completion=Math.round(value.completion)
					});
					this.total=res.total;
					this.Lists = res.list;
					this.loading = false;
					//NProgress.done();
				});					
			},
			getcourseInfo:function(){
				var params=this.$route.query.id;
				var _this=this;
				courseone(params).then((res)=>{			
					_this.quanzhonglist[0].value=res.personWeight;
					_this.quanzhonglist[1].value=res.teamWeight;
					_this.quanzhonglist[2].value=res.performanceWeight;
					_this.quanzhonglist[3].value=res.completionWeight;
					_this.performanceWeight=res.performanceWeight/100;
					_this.personWeight=res.personWeight/100;
					_this.teamWeight=res.teamWeight/100;
					_this.completionWeight=res.completionWeight/100;
					_this.drawLine(res.completion)
				})			
			},					
		    drawLine(e) {
				var e=e; 
				var Chart4 = echarts.init(document.getElementById('myChartbing'));
					Chart4.setOption ( {
				        	title:{
							        show:true,
							        text:e+'%',
							        x:'center',
						        	y:'center',
							        textStyle: {
					                    fontSize: '30',
					                    color:'red',
					                    fontWeight: 'bold'
					                }
						       },
						    tooltip: {
						        trigger: 'item',
						        formatter: "{d}%",
						        show:false
						    },
						    legend: {
						        orient: 'vertical',
						        x: 'left',
						        show:false
						    },
						    series: 
						        {
						            name:'',
						            type:'pie',
						            radius: ['65%', '85%'],
						            avoidLabelOverlap: true,
						            hoverAnimation:false,
						            label: {
						                normal: {
						                    show: false,
						                    position: 'center'
						                },
						                emphasis: {
						                    show: false
						                }
						            },
						            labelLine: {
						                normal: {
						                    show: false
						                }
						            },
						            data:[
						                {value:e, name:''},
						                {value:100-e, name:''}
						            ]
						        }
						    
						});
			},
			lookDetail:function(content,id){
				localStorage.setItem('studentdetail',JSON.stringify(content));
				this.skip('studentstatis',content.userId)
			},
			joinCourse:function(userId,performenceScore,totalScore){
				var martk={courseId:this.$route.query.id,userId:userId,performenceScore:performenceScore,totalScore:totalScore};
				var courseStudent=[];
				courseStudent.push(martk)
				this.$confirm('确定发布分数吗?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					this.loading = true;
					var params=new URLSearchParams();
					params.append('courseStudentJson',JSON.stringify(courseStudent));
					coursestudentmark(params).then((r) => {
						if(!r.error){
							this.$message({
								message: '申请成功',
								type: 'success'
							});
							this.loading = false;
							this.getList();		
							
						}else{
							this.$message({
								message:r.message,
								type: 'error'
							});		
							this.loading = false;
						}
					})	
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消共享'		
					});						
				});				
			
			},			
		},	
		mounted() {
			this.getList();
			this.getcourseInfo();
		}
	};

</script>
